{% assign blockId = block_id | default: section.block_id %}
{% assign data = section.settings %}

{% if section.settings.is_width_fill %}
  {% assign container = 'container-fill' %}
{% else %}
  {% assign container = 'container_wrapper' %}
{% endif %}

{%- capture img_crop -%}
{%- if section.settings.height != 'auto' -%}
data-crop-type="height"
{%- endif -%}
{%- endcapture -%}
<div class="block_sildes" id="block_sildes_{{blockId}}" style="--height: {{data.height}}">
  <div class="{{container}} block_sildes_container">
    <div id="swiper-{{ blockId }}" class="swiper relative">
      <ul class="swiper-wrapper">
        {% for block in section.blocks %}
          <li
            class="swiper-slide relative"
            style="
				--subtitle-color: {{block.subtitle_color}};
              --title-color: {{block.title_color}};
              --detail-color: {{block.detail_color}};
              --btn-bg: {{block.button_bg_color}};
              --btn-color: {{block.button_font_color}};
            "
          >
            <a class="image_box" href="{{block.link | setUrlDataFrom:data_from}}">
              {% include 'lazy_img',file_type: 'banner',attr: img_crop,class: 'slide-item-image block-image-pc',alt: block.pc_image.alt,src: block.pc_image.src %}
              {% assign mobile_image_src = block.mobile_image.src | default: block.pc_image.src %}

              {% include 'lazy_img',file_type: 'banner',attr: img_crop,class: 'slide-item-image block-image-mobile',alt: block.mobile_image.alt,src: mobile_image_src %}
            </a>
            <div class="mask absolute w-full h-full left-0 top-0" style="--mask-color:{{ block.mask_color }};"></div>
            <div class="text_box flex {{block.position}}">
              <div class="text_box_container md:p-[50px] xl:p-[70px] p-[24px] max-w-[800px]">
				{% if block.subtitle != '' %}
					<div class="item_subtitle public_subtitle text-[15px] mb-[15px]">{{block.subtitle}}</div>
				{% endif %}
                {% if block.title != '' %}
                  <div class="item_title">{{ block.title }}</div>
                {% endif %}
                {% if block.detail != '' %}
                  <div class="item_detail">{{ block.detail }}</div>
                {% endif %}
                {% if block.button_text != '' or block.button_text2 != '' %}
                  <div class="btn_wrap">
                    {% if block.button_text != '' %}
                      {% include 'btn',link: block.link,btn_text: block.button_text %}
                    {% endif %}
                    {% if block.button_text2 != '' %}
                      {% include 'btn',link: block.link2,btn_text: block.button_text2 %}
                    {% endif %}
                  </div>
                {% endif %}
              </div>
            </div>
          </li>
        {% endfor %}
      </ul>

      <div class="btn absolute top-3 right-3 md:flex hidden items-center z-10">
        <div class="swiper-button-prev" id="swiper-button-prev-{{blockId}}">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left ltr-icon"><title>Left</title><polyline points="15 18 9 12 15 6"></polyline></svg>
        </div>
        <div class="swiper-pagination relative bottom-auto" id="swiper-pagination-{{blockId}}"></div>
        <div class="swiper-button-next" id="swiper-button-next-{{blockId}}">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right ltr-icon"><title>Right</title><polyline points="9 18 15 12 9 6"></polyline></svg>
        </div>
      </div>

	  <div class="swiper-pagination swiper-pagination2 md:hidden" id="swiper2-pagination-{{blockId}}"></div>

    </div>
    
  </div>
</div>
<script type="text/javascript">
  
(function(){(function() {

  {%- capture autoplay -%}
  {%- if section.settings.is_play -%}
  {delay: Number('{{section.settings.duration}}') * 1000}
  {%- else -%}
  false
  {%- endif -%}
  {%- endcapture -%}
  	let options = {}
	if($(window).width() >= 768) {
		options.pagination = {
			el: "#swiper-pagination-{{blockId}}",
			type: "fraction",
		}
		options.navigation = {
			nextEl: "#swiper-button-next-{{blockId}}",
			prevEl: "#swiper-button-prev-{{blockId}}",
		}
	}else {
		options.pagination = {
			el: "#swiper2-pagination-{{blockId}}",
			clickable :true,
		}
	}
    let swiper = new Swiper("#swiper-{{ blockId }}", {
        spaceBetween: 30,
        {% if section.blocks.size >1  %}loop: true,{% endif %}
        watchOverflow: true,
        autoplay:{{autoplay}},
        effect: "fade",
       	...options
      });
      $("#block_sildes_{{blockId}}").parent().css('margin-bottom', `{{section.settings.margin_bottom}}px`);
})()})()

</script>
{% schema %}
{
	"tag": "",
	"class": "block_slides",
	"is_global": false,
	"icon": "icon-lunbotu",
	"name": {
		"zh_CN": "轮播图",
		"en_US": "Slideshow"
	},
	"max_blocks": "10",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_input_number",
			"max": 200,
			"min": 0,
			"id": "margin_bottom",
			"label": {
				"zh_CN": "下边距",
				"en_US": "Bottom margin"
			},
			"default": 80
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "自动轮播",
				"en_US": "Automatic slide"
			},
			"id": "is_play"
		},
		{
			"type": "card_slider",
			"label": {
				"zh_CN": "轮播时间(s)",
				"en_US": "Slide time (s)"
			},
			"default": 2,
			"max": 5,
			"min": 1,
			"id": "duration"
		},
		{
			"type": "card_select",
			"label": {
				"zh_CN": "图片高度",
				"en_US": "Image height"
			},
			"id": "height",
			"option": [
				{
					"label": {
						"zh_CN": "大",
						"en_US": "Big"
					},
					"value": "800px"
				},
				{
					"label": {
						"zh_CN": "中",
						"en_US": "Middle"
					},
					"value": "600px"
				},
				{
					"label": {
						"zh_CN": "小",
						"en_US": "Small"
					},
					"value": "420px"
				},
				{
					"label": {
						"zh_CN": "自适应",
						"en_US": "Adaptive"
					},
					"value": "auto"
				}
			]
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "宽度铺满",
				"en_US": "Spread the width"
			},
			"id": "is_width_fill",
			"default": true
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "内容",
				"en_US": "Content"
			}
		}
	],
	"blocks": [
		{
			"name": {
				"zh_CN": "轮播图片",
				"en_US": "Slide image"
			},
			"type": "slide-item",
			"settings": [
				{
					"type": "card_image",
					"label": {
						"zh_CN": "pc端图片",
						"en_US": "Image on PC"
					},
					"default": {
						"src": "",
						"alt": ""
					},
					"info": {
						"zh_CN": "尺寸建议：大-1920*800px，中-1920*600，小-1920*420",
						"en_US": "Suggested size: large -1920*800px, medium -1920*600, small -1920*420"
					},
					"id": "pc_image"
				},
				{
					"type": "card_image",
					"label": {
						"zh_CN": "移动端图片",
						"en_US": "Mobile image"
					},
					"default": {
						"src": "",
						"alt": ""
					},
					"info": {
						"zh_CN": "尺寸建议1242*2000px",
						"en_US": "Size suggested 1242*2000px"
					},
					"id": "mobile_image"
				},
				{
					"type": "card_input",
					"label": {
						"zh_CN": "副标题"
					},
					"id": "subtitle",
					"default": ""	
				},
				{
					"type": "card_textarea",
					"label": {
						"zh_CN": "标题",
						"en_US": "Title"
					},
					"id": "title",
					"default": "Image Slide"
				},
				{
					"type": "card_text_editor",
					"label": {
						"zh_CN": "简短描述",
						"en_US": "Short description"
					},
					"id": "detail",
					"default": "Tell your brand's story through images Tell your brand's story through imagesTell your brand's Tell your brand's story"
				},
				{
					"type": "card_select",
					"label": {
						"zh_CN": "布局",
						"en_US": "Layout"
					},
					"default": "center-center",
					"id": "position",
					"option": [
						{
							"label": {
								"zh_CN": "上左",
								"en_US": "Up left"
							},
							"value": "top-left"
						},
						{
							"label": {
								"zh_CN": "上中",
								"en_US": "Upper middle"
							},
							"value": "top-center"
						},
						{
							"label": {
								"zh_CN": "上右",
								"en_US": "Top right"
							},
							"value": "top-right"
						},
						{
							"label": {
								"zh_CN": "中左",
								"en_US": "Center left"
							},
							"value": "center-left"
						},
						{
							"label": {
								"zh_CN": "中中",
								"en_US": "Center center"
							},
							"value": "center-center"
						},
						{
							"label": {
								"zh_CN": "中右",
								"en_US": "Center right"
							},
							"value": "center-right"
						},
						{
							"label": {
								"zh_CN": "下左",
								"en_US": "Lower left"
							},
							"value": "bottom-left"
						},
						{
							"label": {
								"zh_CN": "下中",
								"en_US": "Lower middle"
							},
							"value": "bottom-center"
						},
						{
							"label": {
								"zh_CN": "下右",
								"en_US": "Lower right"
							},
							"value": "bottom-right"
						}
					]
				},
				{
					"type": "card_color",
					"label": {
						"zh_CN": "副标题颜色",
						"en_US": "Header color"
					},
					"default": "#1d1f21",
					"id": "subtitle_color"
				},
				{
					"type": "card_color",
					"label": {
						"zh_CN": "标题颜色",
						"en_US": "Header color"
					},
					"default": "#1d1f21",
					"id": "title_color"
				},
				{
					"type": "card_color",
					"label": {
						"zh_CN": "描述颜色",
						"en_US": "Describe color"
					},
					"default": "#1d1f21",
					"id": "detail_color"
				},
				{
					"type": "card_input",
					"label": {
						"zh_CN": "按钮文字",
						"en_US": "Button text"
					},
					"id": "button_text",
					"default": "SHOP NOW"
				},
				{
					"type": "card_page_link",
					"label": {
						"zh_CN": "跳转链接",
						"en_US": "Jump links"
					},
					"default": {
						"type": "",
						"title": "",
						"url": ""
					},
					"id": "link"
				},
				{
					"type": "card_input",
					"label": {
						"zh_CN": "按钮文字",
						"en_US": "Button text"
					},
					"id": "button_text2",
					"default": "SHOP NOW"
				},
				{
					"type": "card_page_link",
					"label": {
						"zh_CN": "跳转链接",
						"en_US": "Jump links"
					},
					"default": {
						"type": "",
						"title": "",
						"url": ""
					},
					"id": "link2"
				},
				{
					"type": "card_color",
					"label": {
						"zh_CN": "按钮文字颜色",
						"en_US": "Button text color"
					},
					"id": "button_font_color",
					"default": "#000"
				},
				{
					"type": "card_color",
					"label": {
						"zh_CN": "按钮背景颜色",
						"en_US": "Button background color"
					},
					"id": "button_bg_color",
					"default": "#fff"
				},
				{
					"type": "card_color",
					"label": {
						"zh_CN": "蒙层颜色",
						"en_US": "Mask color"
					},
					"id": "mask_color",
					"show-alpha": "false",
					"color-format": "rgb",
					"default": "rgba(0,0,0,0)"
				}
			]
		}
	],
	"default": {
		"settings": {
			"margin_bottom": 80,
			"is_play": false,
			"duration": "3",
			"height": "600px",
			"is_width_fill": false
		},
		"blocks": [
			{
				"pc_image": {
					"src": "",
					"alt": ""
				},
				"mobile_image": {
					"src": "",
					"alt": ""
				},
				"subtitle_color": "#1d1f21",
				"title_color": "#1d1f21",
				"detail_color": "#1d1f21",
				"subtitle": "",
				"title": "Find the perfect shade.",
				"detail": "Now stocking Fob Paris, Frank Green, Izipizi, Votivo, Valmore and more.",
				"position": "center-left",
				"button_text": "Shop Lips",
				"link": {
					"type": "",
					"title": "",
					"url": ""
				},
				"button_text2": "Shop Makeup",
				"link2": {
					"type": "",
					"title": "",
					"url": ""
				},
				"button_bg_color": "#fff",
				"button_font_color": "#000",
				"mask_color": "rgba(0,0,0,0)",
				"block_type": "slide-item"
			},
			{
				"pc_image": {
					"src": "",
					"alt": ""
				},
				"mobile_image": {
					"src": "",
					"alt": ""
				},
				"subtitle_color": "#1d1f21",
				"title_color": "#1d1f21",
				"detail_color": "#1d1f21",
				"subtitle": "",
				"title": "Find the perfect shade.",
				"detail": "Now stocking Fob Paris, Frank Green, Izipizi, Votivo, Valmore and more.",
				"position": "center-left",
				"button_text": "Shop Lips",
				"link": {
					"type": "",
					"title": "",
					"url": ""
				},
				"button_text2": "Shop Makeup",
				"link2": {
					"type": "",
					"title": "",
					"url": ""
				},
				"button_bg_color": "#fff",
				"button_font_color": "#000",
				"mask_color": "rgba(0,0,0,0)",
				"block_type": "slide-item"
			}
		]
	}
}
{% endschema %}
